<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import * as echarts from 'echarts'
import { message } from 'ant-design-vue';
import { orderStatisticEChart } from './dashboard-service';

const orderEchartRef = ref<HTMLElement>();
const state = reactive({
  loading: false
});
let orderEchart: echarts.ECharts
// 数据卡片
const dataCards = ref([
  { title: "今日销售总额", value: 20000 },
  { title: "今日订单总数", value: 16581 },
  { title: "今日评论数", value: 36541 },
  { title: "商品总数量", value: 13694 },
  { title: "今日新增用户", value: 49636 },
]);
// 快捷功能
const quickFunctions = ref([
  { title: "添加商品", icon: "icon-tianjiashangpin", path: "" },
  { title: "订单列表", icon: "icon-dingdanliebiao", path: "" },
  { title: "用户管理", icon: "icon-yonghuguanli1", path: "" },
  { title: "限时购列表", icon: "icon-xianshiqianggou", path: "" },
  { title: "Banner列表", icon: "icon-bannerguanli", path: "" }
]);
// 商品总览
const goodsTotalData = ref([
  { title: "已下架", value: "100" },
  { title: "已上架", value: "400" },
  { title: "库存紧张", value: "40" },
  { title: "全部商品", value: "500" }
]);
// 用户总览
const userTotalData = ref([
  { title: "今日新增", value: "100" },
  { title: "昨日新增", value: "200" },
  { title: "本月新增", value: "1000" },
  { title: "会员总数", value: "5000" }
]);
// 待办
const todos = ref([
  { title: "待发货订单", value: 1312, icon: "icon-daifahuo", path: "" },
  { title: "待处理退货订单", value: 12, icon: "icon-tuihuochuli", path: "" },
  { title: "待处理退款申请", value: 32, icon: "icon-jisutuikuan", path: "" }
]);

// 初始化订单图表
const initOrderEchart = () => {
  if (!orderEchartRef.value) {
    message.error("初始化图表失败");
    return
  }

  if (!orderEchart) {
    orderEchart = echarts.init(orderEchartRef.value);
  }

  orderEchart.setOption(orderStatisticEChart());
}

// 浏览器大小变化重置图表大小
const resetEchartSize = () => {
  orderEchart && orderEchart.resize();
}

onMounted(() => {
  initOrderEchart();
  window.addEventListener('resize', resetEchartSize);
});

onUnmounted(() => {
  window.removeEventListener('resize', resetEchartSize);
  orderEchart && orderEchart.dispose();
});
</script>

<script lang="ts">
export default { name: "dashboard" }
</script>

<template>
  <!-- 仪表盘容器 -->
  <section class="container">
    <!-- 数据卡片 -->
    <ul class="data-card-box">
      <li v-for="itam in dataCards">
        <h3><a-statistic :value="itam.value" /></h3>
        <p>{{ itam.title }}</p>
      </li>
    </ul>

    <!-- 快捷功能 -->
    <div class="quick-box">
      <a-card title="快捷功能">
        <template v-for="item in quickFunctions">
          <a-card-grid @click="$router.push(item.path)">
            <div class="quick-content">
              <span><ali-icon :type="item.icon"></ali-icon></span>
              <p>{{ item.title }}</p>
            </div>
          </a-card-grid>
        </template>
      </a-card>
    </div>

    <!-- 商品、用户总览 -->
    <div class="goods-user">
      <a-card title="商品总览" :loading="state.loading">
        <template v-for="item in goodsTotalData">
          <a-card-grid>
            <div class="card-grid-content">
              <h3>{{ item.value }}</h3>
              <p>{{ item.title }}</p>
            </div>
          </a-card-grid>
        </template>
      </a-card>

      <a-card title="用户总览" :loading="state.loading">
        <template v-for="item in userTotalData">
          <a-card-grid>
            <div class="card-grid-content">
              <h3>{{ item.value }}</h3>
              <p>{{ item.title }}</p>
            </div>
          </a-card-grid>
        </template>
      </a-card>
    </div>

    <!-- 待办事务 -->
    <div class="todo-box">
      <a-card title="待办事务">
        <template v-for="item in todos">
          <a-card-grid @click="$router.push(item.path)">
            <a-badge class="todo-content" :count="item.value" :overflowCount="999">
              <span><ali-icon :type="item.icon"></ali-icon></span>
              <p>{{ item.title }}</p>
            </a-badge>
          </a-card-grid>
        </template>
      </a-card>
    </div>

    <!-- 订单统计图表 -->
    <div class="order-statistic-box">
      <a-card title="订单统计">
        <template #extra>
          <date-statistic-filter />
        </template>

        <div class="echart-box">
          <section ref="orderEchartRef"></section>
        </div>
      </a-card>
    </div>
  </section>
</template>

<style lang="less" scoped>
@mt: 20px;

.data-card-box {
  display: flex;

  li {
    flex: 1;
    background-color: antiquewhite;
    border-radius: 4px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:not(:last-child) {
      margin-right: 20px;
    }

    h3, p {
      color: #fff;
    }

    h3 {
      font-size: 40px;
      margin-bottom: 10px;

      :deep(.ant-statistic) {
        .ant-statistic-content {
          font-size: 40px;
          color: #fff;
        }
      }
    }

    p {
      font-size: 16px;
    }

    &:nth-child(1) {
      background-color: #58A3F7;
    }

    &:nth-child(2) {
      background-color: #FEC03D;
    }

    &:nth-child(3) {
      background-color: #52C1F5;
    }

    &:nth-child(4) {
      background-color: #FB6260;
    }

    &:nth-child(5) {
      background-color: #8167F5;
    }
  }
}

.quick-box {
  margin-top: @mt;

  .ant-card-grid {
    cursor: pointer;
    width: 12.5%;
    text-align: center;
  }

  .quick-content {
    display: block;

    span {
      color: #AEAEAE;
      font-size: 48px;
    }

    p {
      font-size: 16px;
      color: #AEAEAE;
    }
  }
}

.goods-user {
  display: flex;
  margin-top: @mt;

  .ant-card {
    flex: 1;

    &:not(:last-child) {
      margin-right: 20px;
    }
  }

  .ant-card-grid {
    width: 25%;
    text-align: center;
  }

  .card-grid-content {
    h3 {
      color: #F04844;
      font-size: 28px;
    }

    p {
      color: var(--vt-c-divider-dark-1);
      font-size: 16px;
    }
  }
}

.todo-box {
  margin-top: @mt;

  .ant-card-grid {
    cursor: pointer;
    width: 12.5%;
    text-align: center;
  }

  .todo-content {
    display: block;

    span {
      color: #AEAEAE;
      font-size: 48px;
    }

    p {
      font-size: 16px;
      color: #AEAEAE;
    }
  }
}

.order-statistic-box {
  margin-top: @mt;

  .echart-box {
    height: 350px;
    overflow: hidden;

    > section {
      width: 100%;
      height: 100%;
    }
  }
}
</style>